import React, { useState, useEffect } from "react";
import { Drawer, Image } from "antd";
import defaultImageUrl from '@/utils/defaultImage'
import loadingImg from '@/assets/images/loading.gif';

const Viewworks = (props) => {
  const { onCancel } = props;
  const [visible, setVisisble] = useState(props.visible);
  const [workType, setworkType] = useState(props.workType);
  const [list, setlist] = useState(props.list);


  useEffect(() => {
    setworkType(props.workType);
  }, [props.workType]);

  useEffect(() => {
    setlist(props.list);
  }, [props.list]);

  useEffect(() => {
    setVisisble(props.visible);
  }, [props.visible]);

  // 取消，关闭抽屉 重置表单
  const handleCancel = () => {
    onCancel && onCancel();
  };


  const loadingImgNode = <img src={loadingImg} alt='loading' width={50} height={50} style={{margin: '50px 50px'}} />;
  const ImageShow = (list) => (
    <Image.PreviewGroup>
      {list.map((v, index) => (
        <div className="mbr15" key={index}>
          <Image width={150} height={150} src={v} placeholder={loadingImgNode}  fallback={defaultImageUrl}/>
        </div>
      ))}
    </Image.PreviewGroup>
  );

  const VideoShow = (list) =>
    list.map((v, index) => (
      <video
        className="mbr15"
        src={v}
        key={index}
        width="150"
        height="150"
        preload="metadata"
        controls
      >
        您的浏览器不支持H5播放器
      </video>
    ));

  return (
    <Drawer
      title={workType === 1 ? "图片作品查看" : "视频作品查看"}
      visible={visible}
      width={720}
      maskClosable={false}
      placement="right"
      getContainer={false}
      onClose={handleCancel}
    >
      <div className="flexWorks">
        {workType === 1 ? ImageShow(list) : VideoShow(list)}
      </div>
    </Drawer>
  );
};

export default Viewworks;
